import Image from "next/image";
import { IntegrationsType } from "@/sections/Integrations";
import { twMerge } from "tailwind-merge";

function IntegrationsColumn(props: { integrations: IntegrationsType, className?: string }) {
    const { integrations, className } = props;
    return (
        <div className={twMerge("pb-4 flex flex-col gap-4", className)}>
            {integrations.map(integration => (
                <div className="p-6 bg-neutral-900 border border-white/10 rounded-3xl" key={integration.name}>
                    <div className="flex justify-center">
                        <Image className="size-24" src={integration.icon} alt={integration.name} />
                    </div>
                    <h3 className="mt-6 text-3xl text-center">
                        {integration.name}
                    </h3>
                    <p className="mt-2 text-white/50 text-center">
                        {integration.description}
                    </p>
                </div>
            ))}
        </div>

    );
}

export default IntegrationsColumn;